<style lang = "scss" scoped>
#cmain {
  .cmain-content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 10px 30px 30px 30px;
    font-family: Roboto;
    box-shadow: 0 0 10px 0 #cfcfcf;
    border-radius: 10px;
    min-height: 300px;
    position: relative;
  }
  .title {
    text-align: center;
    font-size: 22px;
  }
  .btnNormal {
    float: right;
    button+button {
      margin-left: 10px;
    }
    .download {
      padding: 2px 25px;
      border-radius: 20px;
      margin-left: 10px;
      background-color: #4578ad;
      border-color: #4578ad;
      color: #fff;
      display: inline-block;
      margin-bottom: 0;
      font-weight: normal;
      text-align: center;
      vertical-align: middle;
      touch-action: manipulation;
      cursor: pointer;
      background-image: none;
      border: 1px solid transparent;
      white-space: nowrap;
      line-height: 1.5;
      user-select: none;
      font-size: 14px;
      transition: color 0.2s linear, background-color 0.2s linear,
      border 0.2s linear, box-shadow 0.2s linear;
      &:hover {
        background-color: #6a93bd;
        border-color: #6a93bd;
      }
    }
    button {
      padding: 2px 25px;
      border-radius: 20px;
    }
  }
  .header {

    h2 {
      margin-top: 10px;
      background: #bdd6ee;
      padding-left: 7px;
    }
    .header-left {
      margin: 6px;
      padding-left: 10px;
      .el-col {
        color: #000;
        line-height: 40px;
      }
    }
    .header-right {
      margin: 6px;
      color: #000;
      .el-col {
        color: #000;
        line-height: 40px;
      }
    }
  }
  .main-end {
    h2 {
      background: #bdd6ee;
      padding-left: 10px;
    }
    h6 {
      padding: 10px 0;
    }
  }

  .end-parse {
    margin-top: 20px;
    h2 {
      background: #bdd6ee;
      padding-left: 10px;
    }
    p {
      padding: 6px;
      color: #000000;
      line-height: 27px;
      font-size: 14px;
      span {
        color: red;
      }
    }
  }
  .resolve {
    h2 {
      background: #bdd6ee;
      padding-left: 10px;
    }
    p {
      text-indent: 2rem;
      padding: 6px;
      color: #000000;
      line-height: 27px;
      font-size: 14px;
      line-height: 40px;
    }
  }
  .Reference {
    margin-top: 10px;
    h2 {
      background: #bdd6ee;
      padding-left: 10px;
    }
    .ReferenceContent {
      padding: 6px;
      color: #000000;
      line-height: 27px;
      font-size: 14px;
      p {
        padding: 10px 0;
      }
    }
  }
  .test {
    h2 {
      padding-left: 10px;
      background: #bdd6ee;
    }
    .table4 {
      margin-top: 15px;
      border: 1px solid #000;
      border-bottom: none;
      tr {
        th {
          border-right: 1px solid #000;
          border-bottom: 1px solid #000;
        }
        th:last-child {
          border-right: none;
        }
      }
    }
  }
  .specialTalk {
    margin-top: 20px;
    h2 {
      background: #bdd6ee;
      padding-left: 10px;
    }
    .specialContent {
      padding-left: 10px;
      line-height: 30px;
    }
  }
  .inheritance {
    text-align: right;
    p {
      margin-top: 10px;
      input {
        border: none;
        outline: none;
      }
    }
  }
  .noConformance {
    margin-top: 20px;
    margin-bottom: 20px;
    p {
      padding: 7px 0;
    }
    .table2 {
      margin-top: 15px;
      border: 1px solid #000;
      tr {
        th {
          border-right: 1px solid #000;
          border-bottom: 1px solid #000;
        }
        th:last-child {
          border-right: none;
        }
        td {
          text-align: center;
          word-break: break-all;
          border-bottom: 1px solid #000;
          border-right: 1px solid #000;
        }
      }
    }
  }
  .table3 {
    border: 1px solid #000;
    tr {
      th {
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
      }
      th:last-child {
        border-right: none;
      }
    }
  }
  .jiedu {
    h2 {
      background: #bdd6ee;
      padding-left: 10px;
    }
    p {
      text-indent: 2rem;
      line-height: 40px;
      margin-bottom: 10px;
    }
  }
  .bg {
    h2 {
      background: #bdd6ee;
      padding-left: 10px;
    }
    p {
      text-indent: 2rem;
      line-height: 40px;
      margin-bottom: 10px;
    }
  }
  .table4 {
    border: 1px solid #000;
    border-bottom: none;
    tr {
      th {
        height: 30px;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
      }
      th:last-child {
        border-right: none;
      }
    }
  }
  .Br {
    h2 {
      padding: 5px 0;
      background: #bdd6ee;
      padding-left: 10px;
      margin-bottom: 25px;
    }
    p {
      line-height: 40px;
      margin-bottom: 10px;
    }
  }
  .Nba {
    margin-top: 20px;
    border-bottom: 1px solid #000;
    h2 {
      text-align: center;
      background: #bdd6ee;
      padding-left: 10px;
      margin-bottom: 25px;
    }
    p {
      padding: 10px 0;
    }
  }
  .inspect ol li {
    margin-top: 10px;
  }
  .btnNormal {
    float: right;
    button+button {
      margin-left: 10px;
    }
    .download {
      padding: 2px 25px;
      border-radius: 20px;
      margin-left: 10px;
      background-color: #4578ad;
      border-color: #4578ad;
      color: #fff;
      display: inline-block;
      margin-bottom: 0;
      font-weight: normal;
      text-align: center;
      vertical-align: middle;
      touch-action: manipulation;
      cursor: pointer;
      background-image: none;
      border: 1px solid transparent;
      white-space: nowrap;
      line-height: 1.5;
      user-select: none;
      font-size: 14px;
      transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
      &:hover {
        background-color: #6a93bd;
        border-color: #6a93bd;
      }
    }
  }
}
</style>
<template>
  <div id="cmain" class="family-tree-mask" v-loading="loading" element-loading-text="数据加载中，请稍等......">
    <div class="cmain-content">
      <div v-if="!isShowerror">
        <el-row :span="24">
          <p class="title">遗传性肿瘤分子遗传检测报告</p>
          <div class="btnNormal">
            <!-- <Button type="ghost" @click="goHome">返回</Button> -->
            <Button type="primary" @click="getreportid">生成报告</Button>
            <Button type="primary" @click="reportdown" :disabled='disdown'>下载报告</Button>
          </div>
        </el-row>
        <div class="header">
          <h2>患者基本信息</h2>
          <el-row>
            <el-col :span="12">
              <div class="header-left">
                <el-row>
                  <el-col>受检者姓名：
                    <span v-text="dchPatient.patientname"></span>
                  </el-col>
                  <el-col>受检者编号：
                    <span v-text="dchPatient.patientcode"></span>
                  </el-col>
                  <el-col>出生日期：
                    <span v-text="dchPatient.birthday"></span>
                  </el-col>
                  <el-col>受检者性别：
                    <span v-text="dchPatient.sex"></span>
                  </el-col>
                  <el-col>受检者民族：
                    <span v-text="dchPatient.nation"></span>
                  </el-col>
                  <el-col>报告版本：
                    <span></span>
                  </el-col>
                  <el-col>癌症类型：
                    <span v-text="dchPatient.diseasename"></span>
                  </el-col>
                  <el-col>患癌年龄：
                    <span></span>
                  </el-col>
                  <el-col>受检者临床描述：
                    <span v-text="dchPatient.clinicalinf"></span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="header-right">
                <el-row>
                  <el-col>送检单位：
                    <span></span>
                  </el-col>
                  <el-col>送检医生：
                    <span></span>
                  </el-col>
                  <el-col>样本编号：
                    <span v-text="sample.samplecode"></span>
                  </el-col>
                  <el-col>样本类型：
                    <span v-text="sample.sampletype"></span>
                  </el-col>
                  <el-col>样本接收日期：
                    <span v-text="sample.receivedate"></span>
                  </el-col>
                  <el-col>报告日期：
                    <span v-text="data.date"></span>
                  </el-col>

                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="main-end">
          <h2>检测结果</h2>
          <h6>未检测到可以解释患者表型的致病/疑似致病变异</h6>
        </div>
        <div class="resolve">
          <h2>结果解释</h2>
          <div v-if="documents && documents.length>0">
            <div :key="items" v-for="items in documents">
              <p v-if="items.descModel && items.descModel.text">{{items.descModel.text}}</p>
              <p v-else>暂无数据</p>
            </div>
          </div>
          <p v-else>暂无数据</p>
        </div>
        <div v-for="(item,index) in documents" v-if='item.Gene_information'>
          <div class="Br" v-if="documents && documents.length>0">
            <h2>{{item.Ref_Gene}}基因突变患癌风险</h2>
            <table cellpadding="0" cellspacing="0" width="100%" height="200" class="table4">
              <thead>
                <tr>
                  <th>相关癌症</th>
                  <th>对应风险的发生年龄</th>
                  <th>{{item.Ref_Gene}}突变携带者患癌风险</th>
                  <th>普通人群患癌风险</th>
                </tr>
              </thead>
              <tbody v-for='(items,indexs) in item.Gene_information.geneOverview.geneRiskTableList'>
                <tr v-for='(nowitem,nowindex) in items.cancerRiskList'>
                  <th :rowspan="items.cancerRiskList.length" v-if="nowindex == 0">{{items.cancerType}}</th>
                  <th>{{nowitem.ageRange}}</th>
                  <th>{{nowitem.cancerRisk}}</th>
                  <th>{{nowitem.personRisk}}</th>
                </tr>
              </tbody>
            </table>
            <p>注：以上数据为已知文献中所报道的数据，仅供参考。</p>
          </div>
          <div class="Nba">
            <h2>美国国立综合癌症网络指南（NCCN）摘要 - {{item.Ref_Gene}}突变携带者风险管理措施</h2>
            <table cellpadding="0" cellspacing="0" width="100%" height="200" class="table4">
              <thead>
                <tr>
                  <th>器官</th>
                  <th>应采取措施的年龄（岁）</th>
                  <th>频率</th>
                  <th>检查项目与管理措施</th>
                </tr>
              </thead>
              <tbody v-for='(items,indexs) in item.Gene_information.geneOverview.riskManageTableList'>
                <tr v-for='(nowitem,nowindex) in items.riskManage'>
                  <th :rowspan="items.riskManage.length" v-if="nowindex == 0">{{items.cancerType}}</th>
                  <th>{{nowitem.startAge}}</th>
                  <th>{{nowitem.frequency}}</th>
                  <th>{{nowitem.checkItem}}</th>
                </tr>
              </tbody>
            </table>
            <p>注：以上数据为已知文献中所报道的数据，仅供参考。</p>
          </div>
          <div class="Reference">
            <h2>参考文献</h2>
            <div class="ReferenceContent">
              <!-- <p>{{item.Gene_information.geneName}}</p> -->
              <p v-for='(items,indexs) in item.Gene_information.references'>{{items}}</p>
            </div>
          </div>
        </div>
        <div class="test">
          <h2>检测方法</h2>
          <table cellpadding="0" cellspacing="0" width="100%" height="230" class="table4">
            <tbody>
              <tr>
                <th>检测仪器</th>
                <th>Illumina Hiseq-X10</th>
              </tr>
              <tr>
                <th>提取试剂盒</th>
                <th>Agilent SureSelectXT Human All Exon V6 kit</th>
              </tr>
              <tr>
                <th>读长</th>
                <th>2*150bp</th>
              </tr>
              <tr>
                <th>碱基质量（Q30）</th>
                <th>＞85%</th>
              </tr>
              <tr>
                <th>测序中位深度</th>
                <th>＞100×</th>
              </tr>
              <tr>
                <th>相关软件使用</th>
                <th>GATK4，Sapientia，SIFT，PolyPhen，GERP，Grantham</th>
              </tr>
              <tr>
                <th>参考基因组版本</th>
                <th>GRCh37/hg19</th>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="specialTalk">
          <h2>特别说明</h2>
          <div class="specialContent">
            <p>1、本报告结论均基于本样本在实验室的检测数据，仅对该样本所检测的所有基因及位点负责。</p>
            <p>2、突变位点致病性的判定标准参考：美国医学遗传学与基因组学学会（ACMG）和分子病理学学会（AMP）的一致联合建议：
              <a :href='pdfurl' download target='_blank'>《序列变异解读标准和指南》</a>。</p>
            <p>3、由于个体的差异以及当前医学检测技术水平的限制等因素，即使在检测人员已经履行工作职责和操作规程的前提下，检测结果仍有可能出现假阳性或者假阴性。如需进一步的诊断和治疗，请咨询临床医生。</p>
            <p>4、请妥善保管该报告，由于个人原因造成信息外泄，本实验室概不负责。如有疑义，请联系我们。</p>
            <p>5、常规全外显子数据分析不包含染色体结构变异相关突变。</p>
          </div>
        </div>
        <div class="inheritance">
          <p>
            遗传咨询师：<input type="text"> 报告审核： <input type="text"> 报告日期：
            <input type="text">
          </p>
        </div>
        <div class="noConformance">
          <p>发现与受检者表型不符，但突变频率低于5%的以下位点：</p>
          <table cellpadding="0" cellspacing="0" width="100%" height="150" class="table2">
            <thead>
              <tr>
                <td height="30">基因</td>
                <td height="30">染色体位置</td>
                <td height="30">NAchange</td>
                <td height="30">合子类型</td>
                <td height="30">变异来源</td>
                <td height="30">相关综合征名称</td>
                <td height="30">遗传模式</td>
                <td height="30">变异评级</td>
              </tr>
            </thead>
            <tbody v-if="documentlist && documentlist.length>0">
              <tr v-for="item in documentlist">
                <td height="30" width="70">
                  <span v-text="item.Ref_Gene"></span>
                </td>
                <td height="30" width="70">
                  <span v-text="item.chrAndRef_Pos"></span>
                </td>
                <td height="30" width="120">
                  <span v-text="item.NAChange"></span>
                </td>
                <td height="30" width="70">
                  <span v-text="item.genoType"></span>
                </td>
                <td height="30" width="70">
                  <span></span>
                </td>
                <td height="30" width="90">
                  <span v-text="item.Gene_information.diseaseRisk.relatedName"></span>
                </td>
                <td height="30" width="100">
                  <div v-if="item.descModel">
                    <p :key="it" v-for="it in item.descModel.heredity">{{it}}</p>
                  </div>
                </td>
                <td height="30" width="70">
                  <span v-if='item.descModel !== undefined' v-text="item.descModel.pathogenicity"></span>
                </td>
              </tr>
            </tbody>
            <tbody v-else>
              <tr>
                <td colspan="8" height="30">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="inspect" >
          <p>基于送检的临床表型，选用以下人类表型标准术语（Human Phenotype Ontology, HPO）和／或在线孟德尔遗传（Online Mendelian Inheritance in Man, OMIM）术语以筛选合适候选致病基因。本报告依据以下表型：</p>
          <ol>
            <li v-for="(item, index) in dchPatient.chpoModelList">
              <span v-text="item.chpo_num"></span>：
              <span v-text="item.chpo_cn"></span>
            </li>
          </ol>
        </div>
      </div>
      <error v-if="isShowerror" @errorCallback="getViewReportData"></error>
    </div>
  </div>
</template>
<script>
// 192.168.165.63
// http://14.18.42.211
// 10.131.101.142
import {pdfUrl} from '@/common/js/Base.js'
import { setCookie, getCookie, delCookie } from "@/common/js/cookie.js";
import { data } from "api/index.js";
import error from '@/components/404.vue';
export default {
  data() {
    return {
      pdfurl:pdfUrl.pdfurl,
      loading:false,
      data: {},
      dchPatient: {},
      documentlist: [],
      sample: {},
      isShowerror: false,
      documents: [],
      reportflag: null,
      disdown: true,
      hposhow: false,
      endParse: "未检测到可以解释患者表型的致病/疑似致病变异",
      resolve1: "1、检测到受检者BRCA2基因杂合移码突变。",
      resolve2:
      "2、BRCA2基因突变可引起遗传性乳腺癌-卵巢癌综合征，遗传方式为常染色体显性遗传。",
      resolve3: "3、本次检测到受检者BRCA2基因突变位点为“致病”突变。",

      literature1:
      "[1] Birkenhager, R., Otto, E., Schurmann, M. J., Vollmer, M., Ruf, E.-M., Maier-Lutz, I., Beekmann, F., Fekete, A., Omran, H., Feldmann, D., Milford, D. V., Jeck, N., Konrad, M., Landau, D., Knoers, N. V. A. M., Antignac, C., Sudbrak, R., Kispert, A., Hildebrandt, F. Mutation of BSND causes Bartter syndrome with sensorineural deafness and kidney failure.",
      literature2:
      "[2] Brennan, T. M. H., Landau, D., Shalev, H., Lamb, F., Schutte, B. C., Walder, R. Y., Mark, A. L., Carmi, R., Sheffield, V. C. Linkage of infantile Bartter syndrome with sensorineural deafness to chromosome 1p. Am. J. Hum. Genet. 62: 355-361, 1998.",
      literature3:
      "[3] Estevez, R., Boettger, T., Stein, V., Birkenhager, R., Otto, E., Hildebrandt, F., Jentsch, T. J. Barttin is a Cl- channel beta-subunit crucial for renal Cl- reabsorption and inner ear K+ secretion. Nature 414: 558-561, 2001.",
      literature4:
      "[4] Miyamura, N., Matsumoto, K., Taguchi, T., Tokunaga, H., Nishikawa, T., Nishida, K., Toyonaga, T., Sakakida, M., Araki, E. Atypical Bartter syndrome with sensorineural deafness with G47R mutation of the beta-subunit for ClC-Ka and ClC-Kb chloride channels, barttin. J. Clin. Endocr. Metab. 88: 781-786, 2003.",
      literature5:
      "[5] Banka, S., Veeramachaneni, R., Reardon, W., Howard, E., Bunstone, S., Ragge, N., Parker, M. J., Crow, Y. J., Kerr, B., Kingston, H., Metcalfe, K., Chandler, K., and 40 others. How genetically heterogeneous is Kabuki syndrome? MLL2 testing in 116 patients, review and analyses of mutation and phenotypic spectrum. Europ. J. Hum. Genet. 20: 381-388, 2012.",
      literature6:
      "[6] Daniel, J. A., Santos, M. A., Wang, Z., Zang, C., Schwab, K. R., Jankovic, M., Filsuf, D., Chen, H.-T., Gazumyan, A., Yamane, A., Cho, Y.-W., Sun, H.-W., Ge, K., Peng, W., Nussenzweig, M. C., Casellas, R., Dressler, G. R., Zhao, K., Nussenzweig, A. PTIP promotes chromatin changes critical for immunoglobulin class switch recombination. Science 329: 917-923, 2010.",
      literature7:
      "[7] Hannibal, M. C., Buckingham, K. J., Ng, S. B., Ming, J. E., Beck, A. E., McMillin, M. J., Gildersleeve, H. I., Bigham, A. W., Tabor, H. K., Mefford, H. C., Cook, J., Yoshiura, K., and 24 others. Spectrum of MLL2 (ALR) mutations in 110 cases of Kabuki syndrome. Am. J. Med. Genet. 155A: 1511-1516, 2011."
    };
  },
  methods: {
    goHome() {
      this.$router.go(-1);
    },
    generationflag() {
      let obj = {
        patientid: M.url().patientid,
      }
      data.generationflag(obj).then((res) => {
        if (res.returnCode == 0 || res.returnCode == 1) {
          this.reportflag = res.returnCode;
          if (res.returnCode == 1) {
            this.disdown = false;
            this.reportid = res.data;
          }
        } else {
          this.$Message.error(res.msg)
        }
      })
    },
    getReport() {
      let obj = {
        patientid: M.url().patientid,
        userid: getCookie("userid"),
        productid: 2,
        type: "阴性",
        workflowid: ""
      };
      data.getreportbyword(obj).then(res => {
        if (res.returnCode == 0) {
          this.reportid = res.data;
          this.disdown = false;
          this.$Message.success(res.msg);
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    getreportid() {
      if (this.reportflag == 0) {
        this.getReport()
      } else if (this.reportflag == 1) {
        var _this = this;
        this.$Modal.confirm({
          title: '确认提示',
          content: '<p>报告已存在，是否重新生成报告?</p>',
          onOk: () => {
            this.getReport();
          },
          onCancel: () => {
            this.reportid = res.data;
          }
        });
      }
    },
    reportdown() {
      let obj = {
        reportid: this.reportid
      };
      data.downloadMyReport(obj).then(res => {
        if (res.returnCode == 0) {
          this.downurl = res.data;
          this.downloadFile(this.downurl);
        } else {
          this.$Message.error(res.msg)
        }
      });
    },
    downloadFile(url) {
      try {
        var elemIF = document.createElement("iframe");
        elemIF.src = url;
        elemIF.style.display = "none";
        document.body.appendChild(elemIF);
        // 防止下载两次
        setTimeout(function() {
          document.body.removeChild(elemIF);
        }, 1000);
      } catch (e) {
        console.log(e);
      }
    },
    //获取报告数据
    getViewReportData() {
      let _this = this;
      let obj = {
        productid: 2,
        patientid: M.url().patientid,
        type: "阴性",
        userid: getCookie("userid")
      };
      this.loading = true;
      data
        .getReport(obj)
        .then(res => {
          console.log(res);
          if (res.returnCode == 0) {
            if (res.data && res.data.dchPatient) {
              // if (res.data.documentlist != null && res.data.documentlist.length > 0) {
              //   res.data.documentlist.forEach(function(element) {
              //     if (element.descModel && element.descModel != null) {
              //       // if ("HPO词条" in element.descModel.checks) {
              //       //   _this.hposhow = true;
              //       // }
              //       for (var i = 0; i < element.descModel.checks.length; i++) {
              //                       if (element.descModel.checks[i] == "HPO词条") {
              //                           _this.hposhow = true;
              //                       }
              //                   }
              //     }
              //   }, this);
              // }else if(res.data.documents != null && res.data.documents.length > 0){
              //   res.data.documents.forEach(function(element) {
              //     if (element.descModel && element.descModel != null) {
              //       if ("HPO词条" in element.descModel.checks) {
              //         _this.hposhow = true;
              //       }
              //     }
              //   }, this);
              // }
              this.dchPatient = res.data.dchPatient;
              this.sample = res.data.sample;
              this.documents = res.data.documents;
              this.data = res.data;
              this.documentlist = res.data.documentlist;
              this.generationflag();
            }
          } else {
            this.$Message.error(msg);

          }
          this.loading = false;
          this.isShowerror = false;
        })
        .catch(error => {
          console.log(error);
          this.loading = false;
          this.isShowerror = true;
        });
    }
  },
  mounted() {
    this.getViewReportData();
  },
  components: {
    error
  }
};
</script>
